/**
 * @description 加粗
 * @author wangfupeng
 */
import Editor from 'wangeditor'
import { MenuActive } from 'wangeditor/dist/menus/menu-constructors/Menu'
// 第一，菜单 class ，Button 菜单继承 BtnMenu class
const {
  $,
  BtnMenu
} = Editor

class H1 extends BtnMenu implements MenuActive {
  constructor (editor: Editor) {
    const $elem = $(
      `<div class="w-e-menu" data-title="H1">
                 <h3 class="w-e-icon">H1</h3>
             </div>`
    )
    super($elem, editor)
  }

  /**
   * 点击事件
   */
  public clickHandler (): void {
    const editor = this.editor
    // 执行 h1 命令
    if (this.isActive) {
      editor.cmd.do('formatBlock', '<p>')
    } else {
      editor.cmd.do('formatBlock', '<h1>')
    }
  }

  /**
   * 尝试修改菜单激活状态
   */
  public tryChangeActive (): void {
    const editor = this.editor
    const reg = /^h/i
    const cmdValue = editor.cmd.queryCommandValue('formatBlock')
    if (reg.test(cmdValue)) {
      this.active()
    } else {
      this.unActive()
    }
  }
}

export default H1
